import React,{Component} from "react";
import { Table, Tag, Space } from "antd";
import {Button} from "antd";
import DeleteUser from "./deleteUser";



interface IUser{
    id : number
    name : string

}


interface IState {
    userList:IUser[]
}


export default class UserList extends Component<any, IState>{

    constructor(props :any,context:any) {
        super(props,context);
        let userList:IUser[]=[];
        for (let i=0; i<20;i++){
            userList.push({
                id:i,
                name:"user"+i
            })
        }
        this.state ={
            userList :userList
        }
    }

    deleteUser= (id:number)=>{
        console.log(id)
        this.setState({
            userList:this.state.userList.filter(user => user.id !==id)
        })
    }

    render(): React.ReactNode {
        return (
            <div>
                <Table dataSource={this.state.userList}
                rowKey='id'>
                    <Table.Column title={'id'} dataIndex={'id'} />
                    <Table.Column title={'name'} dataIndex={'name'} />
                    <Table.Column title={"管理"} render={(user:IUser) =>(
                        <Space>
                            <Button type="primary">编辑</Button>
                            <DeleteUser id={user.id} callback={this.deleteUser} />
                        </Space>
                    )} />
                </Table>
            </div>
        )
    }
}
